﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>物理监控</title>
	<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
	<link type="text/css" rel="Stylesheet" href="./css/bigpm2.css" />
	<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="./js/canvas8.js"></script>
	<script type="text/javascript" src="./js/common.js"></script>
		<script type="text/javascript" src="./js/canvas8.js"></script>
	
	<style type="text/css">

	</style>
</head>
<body>
	<div class="main">
		<div class="top">
			<div class="tl"><img src="./images/monitors/bigmonitor/LOGO.png"></div>
			<div class="tr"><div>工具栏</div></div>
		</div>
		<div class="left" >
			<div>工程（F）</div>
			<div>视图（V）</div>
			<div>日志和告警（L）</div>
			<div>工具（T）</div>
			<div>帮助（H）</div>
			<div><img src="./images/monitors/bigmonitor/leftline.png"></div>
		</div>
		<div class="right" >
			<div>放大</div>
			<div style="font-size:16px;color:#DCFFFF;">文件夹</div>
			<div>保存</div>
			<div>另存为</div>
			<div>缩小</div>
			<div>全屏</div>
			<div>编辑</div>
			<div>分享</div>
			<div>设置</div>
			<div>导出</div>
			<div>放大</div>
			<div>文件夹</div>
			<div>保存</div>
			<div>缩小</div>
			<div>全屏</div>
			<div>另存为</div>
			<div>设置</div>
		</div>
		<div class="table-box">
			<div class="table-block">
			</div>
		</div>
		<div class="bottom">
			<div class="bl" style="width:280px;margin-left:60px;">
				<div class="btl1">+添加机箱</div>
				<div class="btl2"><input placeholder="输入功能查询"><div>搜索</div></div>
			</div>
			<div class="br" style="margin-left:20px;"><img src="./images/monitors/bigmonitor/hasapp.png"><span>有程序板卡</span></div>
			<div class="br"><img src="./images/monitors/bigmonitor/noapp.png"><span>无程序板卡</span></div>
			<div class="br2"><div class="dataline" style="border-color:red;"></div><span>数据总线</span></div>
			<div class="br2"><div class="contrline" style="border-color:green;"></div><span>控制总线</span></div>
			<div class="br2"><div class="nochargeline" style="border-color:#fff;"></div><span>未通电总线</span></div>
			<div style="margin-top: 40px;width:250px;float:right;margin-right:50px;"><img src="./images/monitors/bigmonitor/btrightline.png"></div>
		</div>
	
	<!-- 弹窗 -->
	<div id="backmask" onclick="hidemask()"></div>
	 <div id="popmarsk">
		<div class="pop_block">
			<div class="back1"></div>
			<div class="back2">
				<img src="./images/bsk/pop_exit.png" style="position: absolute;right: 30px;top: 30px;">
				<div class="popTop"><div class="popTopLeft">板卡001</div><img src="./images/monitors/bigmonitor/outlink.png" class="outLinkObj"></div>
				<div class="popContent">
					
				</div>
			</div>
			<div class="back3"></div>
		</div>
	</div>
	<!-- 弹窗end -->
</body>

<script type="text/javascript">
//通过class  lineShow和lineHide控制短线的有无 
$(function(){
	var width=$('.pop_block').width();
	var height=$('.pop_block').height();
	var canvasData = {x:0 , y:0, width:width, height:height};
	init_canvas(canvasData);//初始化
	drawCircles();

});

function hidemask(){
	$("#popmarsk").hide();
	$("#backmask").hide();
	 circles=[];
	lineObj = [];
	drawCircles();
}
function clickBoard(obj){
	$("#popmarsk").show();
	$("#backmask").show();
	circles = [];
	lineObj = [];
	drawCircles();
	showCpus(obj);
}
function showCpus(curBoarId){
	$(".popContent").empty();
   	var offsetTop=$(".pop_block").offset().top;
   	var offsetLeft=$(".pop_block").offset().left;
	var boardId=curBoarId;
   	var outY = $(".outLinkObj").offset().top-offsetTop;
   	var outX =$(".outLinkObj").offset().left-offsetLeft;
   	var outlinkObj={x:outX,y:outY,width:60,height:60,id:-1}
   	circles.push(outlinkObj);
   	var html ='';
   	
   	$.post('[[@{/gate_way/get_cpus_by_boardId}]]',{boardId:boardId},"JSON").done(function(res){
   		if(res){
   			var cpus=res.data.cpus;
   			var cpuLinks =res.data.cpuLinks;
   			var len=cpus.length;
   	   		console.log(res.data);
   			for(var i=0;i<cpus.length;i++){
   			 if(cpus[i].cpuType==1){
   					html += '<img class="oneCpu" src="./images/monitors/bigmonitor/sw.png" cpuId='+cpus[i].rioNetId+' />';
		    	 }else if(cpus[i].cpuType==2){
		    		 if(cpus[i].hasApp){
			    		   	html += '<img class="oneCpu" src="./images/monitors/bigmonitor/fpgaapp.png" cpuId='+cpus[i].rioNetId+' />';		    			 
		    		 }else{
		    		   	html += '<img class="oneCpu" src="./images/monitors/bigmonitor/fpga.png" cpuId='+cpus[i].rioNetId+' />';
		    		 }
		    	 }else if(cpus[i].cpuType==3){
		    		 if(cpus[i].hasApp){
				    		html += '<img class="oneCpu" src="./images/monitors/bigmonitor/msu.png" cpuId='+cpus[i].rioNetId+' />';		    			 
			    		 }else{
			    		   	html += '<img class="oneCpu" src="./images/monitors/bigmonitor/msu.png" cpuId='+cpus[i].rioNetId+' />';
			    		 }
		    	 }else if(cpus[i].cpuType==4){
		    		 if(cpus[i].hasApp){
			    		html += '<img class="oneCpu" src="./images/monitors/bigmonitor/dsp.png" cpuId='+cpus[i].rioNetId+' />';		    			 
		    		 }else{
		    		   	html += '<img class="oneCpu" src="./images/monitors/bigmonitor/dsp.png" cpuId='+cpus[i].rioNetId+' />';
		    		 }
		    		 
		    	 }else if(cpus[i].cpuType==5){
		    		 if(cpus[i].hasApp){
   	    		   	   	html += '<img class="oneCpu" src="./images/monitors/bigmonitor/ppcapp.png" cpuId='+cpus[i].rioNetId+' />';
   				 	}else{
    		   	   		html += '<img class="oneCpu" src="./images/monitors/bigmonitor/ppc.png" cpuId='+cpus[i].rioNetId+' />';
   				 	}
		    	 }else if(cpus[i].cpuType==6){
		    		 if(cpus[i].hasApp){
		    		   	html += '<img class="oneCpu" src="./images/monitors/bigmonitor/armapp.png" cpuId='+cpus[i].rioNetId+' />';
		    		 }else{
			    		 html += '<img class="oneCpu" src="./images/monitors/bigmonitor/arm.png" cpuId='+cpus[i].rioNetId+' />';
		    		 }
		    	 }
   		   	}
   		   	$(".popContent").append(html);
   		   	
   		   	if(len/8>2){
   		   		$(".back2").width($(".back2").width()+((len/8)-2)*90);
   		   	}  		   	
   	
   		 	$("#myCanvas").height($(".pop_block").height())
   		 	
   		   	var cpuDatas=$(".popContent").find(".oneCpu");
   		   	for(var i=0;i<cpuDatas.length;i++){
   		   		var Y = $(cpuDatas[i]).offset().top-offsetTop;
   		       	var X =$(cpuDatas[i]).offset().left-offsetLeft;
   		       	var id=parseInt($(cpuDatas[i]).attr("cpuId"));
   		       	var canvasCPu={x:X,y:Y,width:76,height:79,id:id};
   		       	circles.push(canvasCPu);
   		   	} 
   		   	if(cpuLinks != null){
   		   		doLineM(cpuLinks);
   		   	}
   		}
   	});
}
   	function doLineM(cpuLinks){

   		lineObjs = [];
   		for(var i=0;i<cpuLinks.length;i++){
   			var cpuId1 = cpuLinks[i].startRionetId;
   			var cpuId2 = cpuLinks[i].endRionetId;
   			var cpu1;
   			var cpu2;
   			if(cpuId1 != "-1" && cpuId2 != "-1"){
	   			for(var j=0;j<circles.length;j++){
	   				if(circles[j].id==cpuId1){
	   					cpu1 = circles[j];
	   				}
	   				if(circles[j].id==cpuId2){
	   					cpu2 = circles[j];
	   				}
	   			}
	   			doLine2(cpu1,cpu2,cpuLinks[i].startPortId,cpuLinks[i].endPortId);
   			}else if(cpuId1 == "-1" && cpuId2 != "-1"){
   				for(var j=0;j<circles.length;j++){
	   				cpu1 = circles[0];
	   				if(circles[j].id==cpuId2){
	   					cpu2 = circles[j];
	   				}
	   			}
   				doLine3(cpu1,cpu2,null,cpuLinks[i].endPortId);
   			}else if(cpuId1 != "-1" && cpuId2 == "-1"){
   				for(var j=0;j<circles.length;j++){
   					if(circles[j].id==cpuId1){
	   					cpu1 = circles[j];
	   				}
	   				cpu2 = circles[0];
   				}
   				doLine4(cpu1,cpu2,cpuLinks[i].startPortId,null);
			}
   		}
   		drawCircles();

   	}
</script>
<script>
var boardLinksl=[];
var boardLinkrs=[];
var machineBoxesl=[];
var machineBoxesr=[];
var boards=[];
var cpus=[];
var physicalPorts=[];
$(function(){
	$.post('[[@{/gate_way/list_boards}]]',null,"JSON").done(function(res){
	    if(res){
	        var data = res.data;
	        $(".table-block").empty();
	        var boardLinksl=data[0].boardLinks;
	        var boardLinksr=data[1].boardLinks;
	        var html ='';
	         for(var i=0;i<data.length;i++){
	        	 var boards=data[i].boards;
		         html += '<div class="machineBoxs">';
		         html += '<div class="machinebar">';
						html += '<img  class="img1"alt="" src="./images/monitors/bigmonitor/11.png">';
						html += '<span style="margin:0 10px;" id="machineL">'+data[i].machineBoxName+'</span>';
						html += '<img class="img2"  alt="" src="./images/monitors/bigmonitor/expand.png">';
				html += '</div>';
					html += '<div class="machinebox">';
						html += '<div class="leftLineTop"></div>';
						html += '<div class="leftLineBottom"></div>';
						html += '<div class="machineTop top'+(i+1)+'">';
						for(var j=0;j<16;j++){
							if(boards[j] != null){
								html += '<div class="oneboard" onclick="clickBoard('+boards[j].boardId+')" id="top'+(i+1)+j+'" boardId='+boards[j].boardId+'  machineId='+(i+1)+'>';
								html += '<div class="boardLineTop"><div class="linkLine"></div></div>';
								if(boards[j].hasProgram == true){
									html += '<img src="./images/monitors/bigmonitor/hasapp.png" boardstatus=true  class="imgHover">';
								}else{
									html += '<img src="./images/monitors/bigmonitor/noapp.png" boardstatus=false  class="imgHover">';
								}
								html += '<div class="boardLineBottom"><div class="linkLine"></div></div>';
								html += '</div>';	
							}else{
								html += '<div class="oneboard" id="top'+(i+1)+j+'" boardId=-1  machineId='+(i+1)+'>';
								html += '<div class="boardLineTop"><div class="linkLine "></div></div>';
								html += '<img src="./images/monitors/bigmonitor/nocard.png">';
								html += '<div class="boardLineBottom"><div class="linkLine "></div></div>';
								html += '</div>';
							}
						}
						html += '</div>';
						html += '<div class="machineBottom bottom'+(i+1)+'">';
						for(var k=16;k<32;k++){
							if(boards[k] != null){
								html += '<div class="oneboard" onclick="clickBoard('+boards[k].boardId+')" id="bot'+(i+1)+k+'"   boardId='+boards[k].boardId+'  machineId='+(i+1)+'>';
								html += '<div class="boardLineTop"><div class="linkLine"></div></div>';
								if(boards[k].hasProgram){
									html += '<img src="./images/monitors/bigmonitor/hasapp.png" boardstatus=true  class="imgHover">';
								}else{
									html += '<img src="./images/monitors/bigmonitor/noapp.png" boardstatus=false  class="imgHover">';
								}
								html += '<div class="boardLineBottom"><div class="linkLine"></div></div>';
								html += '</div>';
							}else{
								html += '<div class="oneboard" id="bot'+(i+1)+k+'"   boardId=-1  machineId='+(i+1)+'>';
								html += '<div class="boardLineTop"><div class="linkLine "></div></div>';
								html += '<img src="./images/monitors/bigmonitor/nocard.png" boardstatus="-1">';
								html += '<div class="boardLineBottom"><div class="linkLine "></div></div>';
								html += '</div>';	
							}
						}
						html += '</div>';
					html += '</div>';
				html += '</div>';
	         }
	         
			$(".table-block").append(html);
	         
	     	$(".oneboard[id=top10]").css("padding-left","12px");
	    	$(".oneboard[id=bot116]").css("padding-left","12px");
	    	$(".oneboard[id=top20]").css("padding-left","12px");
	    	$(".oneboard[id=bot216]").css("padding-left","12px");
	    	
	    	//显示控制线
	    	for(var l2=0;l2<boardLinksl.length;l2++){
				if(boardLinksl[l2].status == "数据总线"){
					$(".oneboard[machineId=1][boardId="+boardLinksl[l2].startBoardId+"]").find(".boardLineBottom").find(".linkLine").addClass("bordeRed");
					$(".oneboard[machineId=1][boardId="+boardLinksl[l2].endBoardId+"]").find(".boardLineBottom").find(".linkLine").addClass("bordeRed");
				}
				if(boardLinksl[l2].status == "控制总线"){
					$(".oneboard[machineId=1][boardId="+boardLinksl[l2].startBoardId+"]").find(".boardLineTop").find(".linkLine").addClass("bordeGreen");
					$(".oneboard[machineId=1][boardId="+boardLinksl[l2].endBoardId+"]").find(".boardLineTop").find(".linkLine").addClass("bordeGreen");
				}
			}
	    	for(var r2=0;r2<boardLinksr.length;r2++){
				if(boardLinksr[r2].status == "数据总线"){
					$(".oneboard[machineId=2][boardId="+boardLinksr[r2].startBoardId+"]").find(".boardLineBottom").find(".linkLine").addClass("bordeRed");
					$(".oneboard[machineId=2][boardId="+boardLinksr[r2].endBoardId+"]").find(".boardLineBottom").find(".linkLine").addClass("bordeRed");
				}
				if(boardLinksr[r2].status == "控制总线"){
					$(".oneboard[machineId=2][boardId="+boardLinksr[r2].startBoardId+"]").find(".boardLineTop").find(".linkLine").addClass("bordeGreen");
					$(".oneboard[machineId=2][boardId="+boardLinksr[r2].endBoardId+"]").find(".boardLineTop").find(".linkLine").addClass("bordeGreen");
				}
			}
	    	//hover
	    	
	    	$(".imgHover").bind({mouseenter:function(){
		     	if($(this).attr("boardstatus")=="true"){
		     		$(this).attr("src","./images/monitors/bigmonitor/hasapphover.png");
		     	}else{
		     		$(this).attr("src","./images/monitors/bigmonitor/noapphover.png");
		     	}
		     	
	    	},mouseleave :function(){
	    		if($(this).attr("boardstatus")=="true"){
		     		$(this).attr("src","./images/monitors/bigmonitor/hasapp.png");
		     	}else{
		     		$(this).attr("src","./images/monitors/bigmonitor/noapp.png");
		     	}
		      }});
         }
	}); 
});

</script>

</html>
